<template>
    <div class="page-container">
        <!-- 查询 -->
        <Search></Search>

        <!-- 按钮 -->
         <div class="button shadow bs">
            <slot name="button"></slot>
         </div>

        <!-- 表格 -->
         <div class="table shadow bs">
            <slot name="table"></slot>
         </div>

         <!-- 分页 -->
          <div class="pagination shadow">
            <el-pagination background layout="prev, pager, next" :total="total" :page-size="4" size="small" @change="handleChange"/>
          </div>

        <!-- 删除 -->
           <el-dialog
             v-model="dialogMessageVisible"
             title="温馨提示"
             width="400"
           >
             <span class="content">
                <el-icon color="#e1bc43" :size="20"><Warning /></el-icon>
                <span style="padding-left: 5px;">删除后数据无法恢复，您确定删除吗?</span>
             </span>
             <template #footer>
               <div class="dialog-footer">
                 <el-button @click="dialogMessageVisible = false">取消</el-button>
                 <el-button type="primary" @click="dialogMessageVisible = false">
                   确定
                 </el-button>
               </div>
             </template>
           </el-dialog>
    </div>
</template>

<script setup>
import Search from '@/components/search/search.vue';
import { ref } from 'vue';
import {
  Warning
} from '@element-plus/icons-vue'

const dialogMessageVisible=ref(false)

// 当前页数改变
const handleChange=(e)=>{
//    把查询页数和每页显示条数传递到后端查询
   emit('currentPage',e)
}

const open=()=>{
    dialogMessageVisible.value=true
}

defineExpose({
    open
})

const emit=defineEmits(['currentPage'])

defineProps({
  total:{
    type:Number,
    default:8
  }
})

</script>

<style lang='scss' scoped>
.page-container{
    .button{
        margin-top: 5px;
        height: 38px;
        display: flex;
        background-color: #fff;
        padding: 7px;
        border-radius: 5px;
        .el-button{
            height: 24px;
            font-size: 13px;
        }
    }
    .table{
        border-radius: 5px;
        overflow: hidden;    //不然圆角效果不生效
        margin-top: 5px;
    }
    .pagination{
        margin-top: 5px;
        border-radius: 5px;
        background-color: #fff;
        padding: 8px;
    }
    .el-dialog{
        .content{
            display: flex;
            align-items: center;
        }
    }
}
</style>